<script setup lang="ts">
import Index from "./index.vue";

import { ref } from "vue";
import { useRouter } from "vue-router";
import { HOME_ROUTE_NAME } from "@/router/routes/home.route.ts";

const router = useRouter();

const visible = ref(false);

function handleToHome() {
    router.push({ name: HOME_ROUTE_NAME });
}

</script>

<template>
    <div class="h-full">
        <!-- 房间页面本身的组件 -->
        <component v-if="visible" :is="Index"/>
        <!--
            提示信息

            将房间以组件的方式引入是为了用户在房间时刷新页面, 能重新显示提示信息而不是直接进入房间
            如果直接进入房间了, 那么会因为没有DOM点击操作而导致JS操作视频失败
         -->
        <div v-else class="h-full flex flex-col gap-3 justify-center px-10">
            <h2 class="text-xl">为什么会看到该消息?</h2>
            <p class="ow-tip-content text-sm">
                在浏览器中，用户在没有点击网页时代码无法控制视频播放，所以需要在操作视频前让您在页面点击一下，只需要点击【立即加入】即可。
            </p>
            <div class="flex gap-3">
                <n-button class="flex-grow" type="primary" @click="visible = true">立即加入</n-button>
                <n-button class="flex-shrink-0" @click="handleToHome">回到首页</n-button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.ow-tip-content {
    color: var(--sys-description-text-color);
}
</style>